import React from 'react'
import { Box, AutoRollComponent, NoData } from '$components';
// import ReactEcharts from 'echarts-for-react';
import { Progress, Tooltip } from 'antd';

function PopulationDynamics(props) {
    const { fireDevice } = props;
    const total = fireDevice.reduce((p, n) => p + n.device_count, 0);

    // let Ydata = fireDevice.map(d => d.type_name);
    // let Xdata = fireDevice.map(d => d.device_count);
    // const options = {
    //     xAxis: {
    //         type: 'value',
    //         show: false,
    //     },
    //     grid: {
    //         left: -10,
    //         top: 20,
    //         bottom: 0,
    //         right: 20,
    //         containLabel: true,
    //     },
    //     yAxis: [
    //         {
    //             type: 'category',
    //             inverse: true,
    //             axisLabel: {
    //                 show: true,
    //                 margin: 25,
    //                 // textStyle: {
    //                 color: '#ECF7FF',
    //                 fontSize: 12,
    //                 // },
    //                 // 调整左侧文字的3个属性，缺一不可
    //                 verticalAlign: 'center',
    //                 align: 'left',
    //                 //调整文字上右下左
    //                 padding: [0, 0, 0, -30],
    //             },
    //             splitLine: {
    //                 show: false,
    //             },
    //             axisTick: {
    //                 show: false,
    //             },
    //             axisLine: {
    //                 show: false,
    //             },
    //             data: Ydata
    //         },
    //         {
    //             inverse: true,
    //             // y轴最右侧的文字
    //             axisTick: "none",
    //             axisLine: "none",
    //             type: "category",
    //             axisLabel: {
    //                 // margin: 10,
    //                 // textStyle: {
    //                 color: "#24DCF7",
    //                 fontSize: "12",
    //                 // },
    //                 rich: {

    //                     a1: {
    //                         color: '#24DCF7',
    //                         width: 5,
    //                         height: 5,
    //                         fontSize: 16,
    //                     },
    //                     a2: {
    //                         color: '#5999C8',
    //                         width: 5,
    //                         height: 5,
    //                         fontSize: 12,
    //                     },
    //                 },
    //                 formatter: function (value) {
    //                     return [`{a1|${value}}      {a2|个}`];
    //                 },
    //             },
    //             data: Xdata,
    //         },
    //     ],
    //     series: [
    //         {
    //             type: 'bar',
    //             barWidth: 12,
    //             zlevel: 2,
    //             z: 2,
    //             showBackground: true,
    //             backgroundStyle: {
    //                 color: '#2B375C'
    //             },
    //             color: '#005AC6',

    //             label: {
    //                 show: false,

    //             },
    //             data: Xdata,
    //         },
    //         {
    //             type: "pictorialBar",
    //             // symbol: 'image://',
    //             symbolSize: [15, 15],
    //             symbolOffset: [0, 0],
    //             symbolPosition: "right",
    //             z: 20,
    //             zlevel: 20,
    //             itemStyle: {
    //                 // normal: {
    //                 color: "#fff"
    //                 // }
    //             },
    //             data: (function () {
    //                 var list = [];
    //                 for (var i = 0; i < Xdata.length; i++) {
    //                     list.push(2.02 * Xdata[i]);
    //                 }
    //                 console.log(list)
    //                 return list;
    //             })()
    //         },
    //     ],
    // };

    const getContent = () => {
        return <div className='fire-device'>{
            fireDevice.map(d => <div className='fire-device-item'>
                <Tooltip title={d.type_name}>
                    <div className='_name' style={{ textAlign: 'left' }}>{d.type_name}</div>
                </Tooltip>
                <div className='_progress'>
                    <Progress
                        percent={(d.device_count / total) * 100}
                        showInfo={false}
                        strokeWidth={14}
                        strokeColor='#005AC6'
                        trailColor='#2B375C'
                        strokeLinecap="butt"
                    />
                    <div className='_round' style={{
                        position: 'absolute',
                        left: `calc(${(d.device_count / total) * 100}% - 6px)`,
                    }}></div>
                </div>
                <div className='_count'>{d.device_count}<span className='_unit'>个</span></div>
            </div>)
        }</div>
        // <ReactEcharts
        //     option={options}
        //     notMerge
        //     lazyUpdate
        //     style={{ height: 250, width: 423 }}
        // />
    }

    return <Box title={"接入消防设备"} >
        {
            fireDevice.length
                ? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
                : <NoData height={250} />
        }
    </Box>
}

export default PopulationDynamics;


